import { h, render } from 'vue'
import XtxMessage from './index.vue'
// 参数类型
type ParamsType = {
  type: 'success' | 'error' | 'warning' | 'info'
  message: string
  duration?: number
}
// 盛放消息提示组件的容器
const MessageContainer = document.createElement('div')
MessageContainer.className = 'Xtx-Message'
document.body.appendChild(MessageContainer)
export default function Message({
  type,
  message,
  duration = 3000,
}: ParamsType) {
  // 1. 创建了虚拟DOM
  const vnode = h(XtxMessage, { type, message, key: Date.now(), duration })
  // 2. 挂载虚拟DOM
  render(vnode, MessageContainer)
  // 3. 延时一会要移除这个虚拟DOM
  setTimeout(() => {
    // 清除虚拟DOM
    // render(null, MessageContainer)
  }, duration)
}
// 给Message函数扩展方法 Message.success  Message.error Message.warning
Message.success = (message: string, duration = 3000) => {
  Message({ type: 'success', message, duration })
}

Message.error = (message: string, duration = 3000) => {
  Message({ type: 'error', message, duration })
}

Message.warning = (message: string, duration = 3000) => {
  console.log(duration)
  Message({ type: 'warning', message, duration })
}
Message.info = (message: string, duration = 3000) => {
  console.log(duration)
  Message({ type: 'info', message, duration })
}
